﻿<html>
<head>
    <title>My Test Extension Options</title>
</head>
<script type="text/javascript">

    // Saves options to localStorage.
    function save_options() {
        var select = document.getElementById("color");
        var color = select.children[select.selectedIndex].value;
        localStorage["favorite_color"] = color;

        // Update status to let user know options were saved.
        var status = document.getElementById("status");
        status.innerHTML = "Options Saved.";
        setTimeout(function () {
            status.innerHTML = "";
        }, 750);
    }

    // Restores select box state to saved value from localStorage.
    function restore_options() {
        debugger;
        var favorite = localStorage["favorite_color"];
        if (!favorite) {
            return;
        }
        var select = document.getElementById("color");
        for (var i = 0; i < select.children.length; i++) {
            var child = select.children[i];
            if (child.value == favorite) {
                child.selected = "true";
                break;
            }
        }
    }

</script>
<body onload="restore_options()">
    Favorite Color:
    <select id="color">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
        <option value="yellow">yellow</option>
    </select>
    <br />
    <button onclick="save_options()">
        Save
    </button>
    <span id="status"></span>
</body>
</html>
